<!-- DOM操作：创建新文本节点，通过appendChild来实现节点附加
 从DOM中移动或删除元素 -->
<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8" />
  <title>DOM example</title>
  <style>
    .highlight {
      color: white;
      background-color: rgb(167, 229, 126);
      padding: 10px;
      width: 350px;
      text-align: center;
    }
  </style>
</head>

<body>
  <section>
    <!-- alt: 用于 <img> 标签，提供图片的替代文本;当图片无法加载时显示 -->
    <img src="../assets/images/user.png" alt=" A curly haired boy wearing blue clothes " title='关于元素的注释信息' />
    <!-- style使用内联样式 -->
    <p style="color: white; background-color: black; padding: 10px; width: auto; text-align: center;">
      Here we will add a link to the
      <a href="https://www.baidu.com/">百度</a>
    </p>
  </section>
  <script>
    const link = document.querySelector("a");
    link.textContent = "images";
    link.href = "https://img1.baidu.com/it/u=1047145501,4073770646&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731690000&t=14c402c69d53274bb7fa9af0d0e0e392";

    //获取section元素引用
    const sect = document.querySelector("section");
    //创建新的段落
    const para = document.createElement("p")
    para.textContent = "we have a new paragraph"
    sect.appendChild(para)//追加新段落到section中

    //js通过设置属性更新元素样式
    // para.style.color = "white";
    // para.style.backgroundColor = "black";
    // para.style.padding = "10px";
    // para.style.width = "250px";
    // para.style.textAlign = "center";

    para.setAttribute("class", "highlight");




    //在内部链接的段落中添加文本节点
    const text = document.createTextNode(
      " — the premier source for web development knowledge.",
    );

    const linkPara = document.querySelector("p");
    linkPara.appendChild(text)
    // sect.appendChild(linkPara)//将段落一道section底部
    //sect.removeChild(linkPara);


  </script>
</body>

</html>